
import '../sass/Menu.scss'
import { useEffect, useState } from 'react'
import axios from 'axios'
import ProductItem from '../components/ProductItem'
import {useNavigate,Outlet} from 'react-router-dom'

function Menu() {

    //数据
    let [shopList, setShopList] = useState([])
    let [shopListShop, setShopListShop] = useState([])
    let [activeIndex, setActiveIndex] = useState(0)

    //导入方法
    let navigate = useNavigate()

    //方法
    //获取tabbar数据
    let getShopList = () => {
        axios({
            method: 'get',
            url: '/type',
        }).then(res => {
            setShopList(res.data.result)
            getShopListShop(res.data.result[activeIndex].type)
        })
    }
    //获取商品数据
    let getShopListShop = typeValue => {
        axios({
            method: 'get',
            url: '/typeProducts',
            params: {
                key: 'type',
                value: typeValue
            }
        }).then(res => {
            setShopListShop(res.data.result)
        })
    }
    //切换tabbar
    let changeShopList = (index, type) => {
        if (activeIndex == index) {
            return
        }
        setActiveIndex(index)
        getShopListShop(type)
    }

    //hook周期
    useEffect(() => {
        getShopList()
    }, [])

    return (
        <div className="menu">
            <div className="left">
                {
                    shopList.map((item, index) => {
                        return (
                            <div className={`shop-list ${index == activeIndex ? 'active' : ''}`} key={item.id} onClick={() => { changeShopList(index, item.type) }}>{item.typeDesc}
                                <div className={`${activeIndex == index ? 'line' : ''}`}></div>
                            </div>
                        )
                    })
                }
            </div>
            <div className="right">
                <div className="product">
                    {
                        shopListShop.map((item, index) => {
                            return (
                                <div className="product-item" key={item.id} onClick={() => {navigate(`/shopDetail/${item.pid}`)}}>
                                    <ProductItem pro={item} />
                                </div>
                            )
                        })
                    }
                </div>
            </div>
            <Outlet></Outlet>
        </div>
    )
}

export default Menu